<script src="../../../../../../utils/uploadLocal.js"></script>
<template>
  <div class="fileUpload">
    <ul v-show="showPopup">
      <li v-for="item in list" :key="item.id" :class="{'select': item.ifSelect, 'cp': true}"
          @mouseenter="selectLi(item)" @click="submit(item)">{{ item.name }}
      </li>
    </ul>
    <mid-dialog-box title="上传（文档）" v-if="showFileDialog" @closeMidDialog="showFileDialog = false">
      <div class="contentBox">
        <table class="tHead">
          <thead>
          <th>选择</th>
          <th>文档名称</th>
          <th>文件大小</th>
          </thead>
        </table>
        <div class="outBox">
          <table class="tBody">
            <tbody>
            <tr v-for="item in fileList" :key="item.file_id">
              <td>
                <input type="checkBox" v-model="item.ifSelect" @change="changeSelect(item)"/>
              </td>
              <td>
                <img :src="item.file_name | imgSrc" alt="">
                <span>{{ item.file_name }}</span>
              </td>
              <td>{{ item.file_size_str }}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div class="btn-blue btn" @click="submitFiles">上传</div>
      </div>
    </mid-dialog-box>
  </div>
</template>

<script>
import {sendSock} from '@/utils/socketSend'

export default {
  name: 'fileUpload',
  data() {
    return {
      list: [
        {
          id: 0,
          name: '上传',
          ifSelect: true
        },
        {
          id: 1,
          name: '本地上传',
          ifSelect: false
        }
      ],
      file: null,
      // 是否展示在线上传
      showFileDialog: false
    }
  },
  computed: {
    showPopup() {
      return this.$store.state.common.showLittlePopup.chatSubmitFilePopup
    },
    // 线上文档列表
    fileList() {
      return this.$store.state.message.fileList
    },
    current_contact() {
      return this.$store.state.chatInformation.current_contact
    }
  },
  methods: {
    // 鼠标移入 选中当前项
    selectLi(item) {
      this.list.forEach(item => {
        item.ifSelect = false
      })
      item.ifSelect = true
    },
    // 鼠标点击上传、本地上传
    submit(item) {
      if (item.id === 1) {
        this.tools.createInputFile().then(res => {
          this.sendFile(res.data.data)
        })
      } else {
        this.showFileDialog = true
        this.$store.dispatch('message/getFileList')
      }
    },
    // 切换在线文档选中状态
    changeSelect(item) {
      this.$store.commit('message/set_file_ifSelect', item)
    },
    // 点击上传
    submitFiles() {
      const submitFileList = this.fileList.filter(item => item.ifSelect)
      this.sendFile(submitFileList)
      this.showFileDialog = false
    },
    sendFile(fileInfoList) {
      fileInfoList.forEach(item => {
        item.file_name = decodeURI(item.file_name)
        const message = {
          type: 'file',
          isSelf: true,
          file_name: item.file_name,
          file_size: item.file_size,
          file_id: item.file_id
        }
        const body = {
          id: this.current_contact.id,
          timestamp: +new Date(),
          file_id: item.file_id,
          file_size: item.file_size,
          file_name: item.file_name
        }
        sendSock({
          type: this.current_contact.id_type == 1 ? '2.2.7': '3.2.7',
          body
        })
        this.$store.commit('socket/set_operationReqId', 'sendMessageId')
        this.$store.dispatch('chatInformation/setAddMessage', { message, id: this.current_contact.id, idType: this.current_contact.id_type })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.fileUpload {
  ul {
    width: 128px;
    height: 80px;
    background-color: #fff;
    border-radius: 4px;
    padding: 4px;

    li {
      height: 36px;
      text-align: center;
      line-height: 36px;
      font-size: 12px;
    }

    .select {
      background-color: rgba(48, 78, 236, 0.05);
    }
  }

  form {
    display: none;
  }

  .contentBox {
    padding: 0 24px;

    .tHead {
      margin-top: 21px;
      width: 100%;

      thead {
        th {
          font-size: 14px;
          font-weight: 500;
          height: 44px;
          line-height: 44px;
          border-bottom: 1px solid #EBEDF3;
          text-align: left;
          color: #0D172C;

          &:first-child {
            width: 109px;
            padding-left: 16px;
          }

          &:nth-child(2) {
            width: 421px;
          }
        }
      }
    }

    .outBox {
      height: 360px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #d8dee9;
        border-radius: 2px;
      }

      .tBody {
        width: 100%;

        tr {
          td {
            font-size: 14px;
            font-weight: 500;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #EBEDF3;
            text-align: left;
            color: #3F4F71;

            input {
              vertical-align: middle;
            }

            img {
              width: 32px;
              height: 32px;
              vertical-align: middle;
              margin-right: 12px;
            }

            span {
              vertical-align: middle;
              font-size: 14px;
            }

            &:first-child {
              width: 109px;
              padding-left: 16px;
            }

            &:nth-child(2) {
              width: 421px;
            }
          }
        }
      }
    }

    .btn {
      margin: 70px auto 0;
    }
  }
}
</style>
